<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card v-loading="loading" class="tree-card">
        <!-- 根节点 -->
        <!-- 子组件-->
        <TreeTools
          :node-data="company"
          :is-root="true"
          @add-depts="handleAddDepts"
        />
        <!-- 放置一个tree组件 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <template #default="{ data }">
            <!-- 子组件-->
            <TreeTools
              :node-data="data"
              @del-depts="getDepartments"
              @add-depts="handleAddDepts"
              @edit-depts="handleEditDepts"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 弹层组件 -->
      <AddDept
        ref="addDeptDialog"
        :show-dialog="showDialog"
        :node-data="nodeData"
        :depts-list="deptsList"
        @add-depts="getDepartments"
        @close-dialog="handleClose"
      />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { reqGetDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
export default {
  name: 'Departments',
  components: { TreeTools, AddDept },
  data() {
    return {
      company: {},
      departs: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      showDialog: false,
      nodeData: {},
      deptsList: [], // 列表式数据
      loading: false
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 获取组织架构数据
    async getDepartments() {
      this.loading = true
      const { data } = await reqGetDepartments()
      // console.log(data, '000')
      // this.departs = data.depts
      this.departs = tranListToTreeData(data.depts, '')
      this.deptsList = data.depts // 列表式数据
      this.company = {
        name: data.companyName,
        manager: '负责人',
        id: ''
      }
      // console.log(data.depts, '000')
      this.loading = false
    },
    // 关闭弹窗
    handleClose() {
      this.showDialog = false
    },
    // 显示弹窗
    handleAddDepts(nodeData) {
      // 显示弹层
      this.showDialog = true
      // 存储传过来的数据, 这个应该记录下来, 将来添加需要用到
      this.nodeData = nodeData
      // console.log(nodeData, '111')
    },
    // 编辑部门节点
    handleEditDepts(nodeData) {
      this.showDialog = true
      this.nodeData = nodeData
      // 通过ref来触发子组件中的函数
      this.$refs.addDeptDialog.getDepartDetail(nodeData.id)
    }
  }
}
</script>

<style  scoped lang="sass">
.tree-card
  padding: 30px 30px
  font-size: 14px

.el-tree
  ::v-deep
    // 小三角的样式, 去掉默认的小三角的旋转效果

    &-node__expand-icon.expanded
      -webkit-transform: rotate(0deg)
      transform: rotate(0deg)

    // 有子节点 且未展开 +
    .el-icon-caret-right:before
      background: url('~@/assets/common/add-circle.png') no-repeat 0 0
      content: ''
      display: block
      width: 16px
      height: 16px
      font-size: 16px
      background-size: 16px

    // 有子节点 且已展开 -

      &-node__expand-icon.expanded.el-icon-caret-right:before
        background: url('~@/assets/common/minus-circle.png') no-repeat 0 0
        content: ''
        display: block
        width: 16px
        height: 16px
        font-size: 16px
        background-size: 16px

    // 没有子节点

      &-node__expand-icon.is-leaf::before
        background: url('~@/assets/common/user-filling.png') no-repeat 0 0
        content: ''
        display: block
        width: 16px
        height: 16px
        font-size: 16px
        background-size: 16px
</style>
